<template>
	<view
		class="custom-checkbox"
		:class="[{ 'is-checked': value }]"
		@click="toggle"
		:style="[labelStyle]"
	>
		<input type="checkbox" :checked="value" @change="onChange" />
		<!-- <text class="checkmark" :style="[circleStyle]"></text> -->
		<text class="serve-info">{{ label }}</text>
		<uni-icons :type="value ? 'checkbox' : 'circle'"></uni-icons>
	</view>
</template>

<script>
export default {
	props: {
		value: Boolean,
		disabled: {
			type: Boolean,
			default: false
		},
		label: {
			type: String,
			default: ''
		},
		fontSize: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: ''
		},
		circleSize: {
			type: String,
			default: ''
		},
		circleColor: {
			type: String,
			default: ''
		}
	},
	computed: {
		isChecked: {
			get() {
				console.log(this.value, 'get-isChecked')
				return this.value
			},
			set(val) {
				console.log(val, 'set-isChecked')
				this.$emit('input', val)
			}
		},
		labelStyle() {
			let styles = {}
			if (this.fontSize) {
				styles.fontSize = this.fontSize
			}
			if (this.color) {
				styles.color = this.color
			}
			return styles
		},
		circleStyle() {
			let styles = {}
			if (this.circleSize) {
				styles.transform = this.circleSize
			}
			if (this.circleColor) {
				if (this.value) {
					styles.backgroundColor = this.circleColor
				}
			}
			return styles
		}
	},
	methods: {
		toggle() {
			console.log('toggle')
			if (!this.disabled) {
				// this.isChecked = !this.isChecked
				this.$emit('toggle', !this.value)
			}
		},
		onChange(event) {
			this.$emit('change', !this.isChecked)
		}
	}
}
</script>

<style scoped lang="scss">
.custom-checkbox {
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 1rpx;
	margin-bottom: 0rpx;
	width: 100%;
	cursor: pointer;
	font-size: 32rpx;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 35rpx 0;
}

.custom-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 1rpx;
	margin-bottom: 0rpx;
	right: 0;
	height: 40rpx;
	width: 40rpx;
	/* background-color: #eee; */
	border: solid 1rpx #ddd;
	border-radius: 50%;
}

.custom-checkbox:hover input .checkmark {
	background-color: #ccc;
}

.custom-checkbox input:checked .checkmark {
	background-color: blue;
}

.checkmark:after {
	content: '';
	position: absolute;
	display: none;
}

.custom-checkbox input:checked .checkmark:after {
	display: block;
}

.custom-checkbox .checkmark:after {
	left: 13rpx;
	top: 6rpx;
	width: 12rpx;
	height: 19rpx;
	border: solid white;
	border-width: 0 5rpx 5rpx 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.is-checked .checkmark {
	background-color: blue;
	border: solid 0rpx #ddd;
}

.is-checked .checkmark:after {
	display: block;
}
.serve-info {
	width: 85%;
}

.big-area {
	width: 160rpx;
	height: 220rpx;
	position: absolute;
	z-index: 10;
	top: -155rpx;
	left: -85rpx;
}
.checkbox-all {
	margin-top: 160rpx;
	margin-left: 63rpx;
}
</style>
